<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            width: 580px;
            margin: auto;
        }
        
        h1 {
            text-align: center;
        }
        
        .book {
            padding: 10px;
            background: #F3DCAB;
        }
        
        .book input {
            padding: 2px;
        }
        
        .total {
            background: #F3DCAB;
            line-height: 30px;
            text-align: center;
            border-top: 1px solid #9ad8a2;
            border-bottom: 1px solid #9ad8a2;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            line-height: 35px;
            text-align: center;
            border: 1px dashed #F3DCAB;
        }
        
        td {
            border: 1px dashed #F3DCAB;
        }
        
        thead {
            background: #F3DCAB;
        }
        
        tbody tr:nth-child(2n) {
            background: #faf7ed;
        }
        
        tbody tr:hover {
            background: #fff3d1;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>图书管理</h1>
        <div class="book">
            <label for="id">编号：</label><input type="number" id="id" v-model='id' :disabled='!idFlag' v-focus>
            <label for="name">名称：</label><input type="text" id="name" v-model.trim='name' @keyup.enter='submit'>
            <button @click='submit' :disabled='checkSumbit'>提交</button>
            <button @click='reset'>重置</button>
        </div>
        <div class="total">图书总数：<span>{{total}}</span></div>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='(item,index) in books' :key='item.id'>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                    <td>
                        <a href="javascript:;" @click.prevent='edit(item)'>修改</a> |
                        <a href="javascript:;" @click.prevent='del(index)'>删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="js/vue.js"></script>
    <script src="js/time.js"></script>
    <script>
        Vue.filter('format', (value, format) => {
            return dateFormat(value, format);
        });
        Vue.directive('focus', {
            inserted: function(el, binding) {
                el.focus();
            }
        });
        const vue = new Vue({
            el: '#app',
            data: {
                id: "",
                idFlag: true, // id是否可以编辑，true可以编辑
                // submitFlag: true, // 提交按钮是否禁用，true禁用
                name: '',
                books: []
            },
            methods: {
                submit: function() {
                    if (this.checkSumbit) return
                    if (this.idFlag) { // 添加图书
                        const book = {
                            id: this.id,
                            name: this.name,
                            date: new Date()
                        };
                        this.books.push(book);
                    } else { // 修改图书
                        const book = this.books.find(item => {
                            return item.id == this.id;
                        });
                        book.name = this.name;
                    }
                    // 清空表单
                    this.reset();
                },
                reset: function() {
                    this.id = '';
                    this.name = '';
                    this.idFlag = true;
                },
                edit: function(book) {
                    this.id = book.id;
                    this.name = book.name;
                    this.idFlag = false;
                },
                del: function(index) {
                    this.books.splice(index, 1);
                },
            },
            computed: {
                total: function() {
                    return this.books.length;
                },
                checkSumbit: function() {
                    return (this.name == '' || this.books.some(item => item.name == this.name)) || // 检查名称
                        (
                            this.idFlag && // 添加模式
                            (this.id == '' || this.books.some(item => item.id == this.id)) // 检查id
                        );
                },
            },
            /* watch: {
                name: function(name) {
                    this.submitFlag = this.checkSumbit;
                },
                id: function(id) {
                    this.submitFlag = this.checkSumbit;
                }
            }, */
            //该生命周期钩子函数被触发的时候，模板已经可以使用。一般用于获取后台数据,然后把数据填充到模板
            mounted: function() {
                const data = [{
                    id: 1,
                    name: '三国演义',
                    date: 2525609975000
                }, {
                    id: 2,
                    name: '水浒传',
                    date: 2525609975000
                }, {
                    id: 3,
                    name: '红楼梦',
                    date: 2525609975000
                }, {
                    id: 4,
                    name: '西游记',
                    date: 2525609975000
                }];
                this.books = data;
            }
        });
    </script>
</body>

</html>